<template>
	<view class="">
		
	
	<!-- 头部 -->
	<view class="content">

		<!--  顶部-->
		<view class="head_top">
			<image src="../../static/image/baiseper.png" mode="widthFix" @click="login()"></image>
			<image src="../../static/image/classifywhile.png" mode="widthFix"></image>
		</view>
		<!-- logo -->
		<view class="logo">
			<image src="https://www.baidu.com/img/flexible/logo/plus_logo_web_white_2.png" mode="widthFix"></image>
		</view>
		<!-- 输入框 -->
		<view class="input_view">
			<input type="text" value="" />
			<image src="../../static/image/yuyin.png" mode="widthFix"></image>
			<image src="../../static/image/zxj.png" mode="widthFix"></image>
			<text>百度一下</text>
		</view>
	</view>
	<!-- 轮播图 -->
	<view class="">
		<swiper class="swiper" interval="1000" autoplay circular indicator-dots :style="{height:h}">
			<swiper-item v-for="(v,index) in list" :key="v.id">
				<image :src="v.image_src" mode="widthFix" @load="load"></image>
			</swiper-item>

		</swiper>
	</view>
	
	<!-- 遮罩层 -->
	<view class="outer" v-show="isshow" @click="hidden()">
		<view class="outer_view" @click.stop="">
				<image src="https://gss0.bdstatic.com/5bd1bjqh_Q23odCf/static/indexatom/personalcenter/assets/img/hanbaobao_04adf60.png" mode="widthFix" @click.stop="hidden()"></image>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list:[],
				h:"",
				isshow:false,
			}
		},
		onLoad() {
			uni.request({
				url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
				success:(res)=> {
					this.list=res.data.message
				}
			})
		},
		methods: {
			// 轮播图自适应
			load(a){
				var sw=uni.getSystemInfoSync().windowWidth;
				var w=a.detail.width;
				var h=a.detail.height;
				var height=sw*h/w+"px";
				this.h=height
			},
			login(){
				this.isshow=true
			},
			hidden(){
				this.isshow=false	
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 460rpx;
		background-image: url(https://search-operate.cdn.bcebos.com/270387025970afe1d5ad84ad0c2d695b.jpg);
		background-size: 100%;

		.head_top {
			width: 95%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			padding-top: 20rpx;
			image {
				width: 60rpx;
			}
		}

		.logo {
			margin: 30rpx auto;
			text-align: center;
			padding-top: 50rpx;
			padding-bottom: 10rpx;

			image {
				width: 400rpx;
			}
		}

		.input_view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			width: 90%;
			margin: 0 auto;
			border-radius: 20rpx;
			background-color: white;
			overflow: hidden;

			input {
				width: 55%;
			}

			image {
				width: 35rpx;
			}

			text {
				text-align: center;
				width: 25%;
				height: 100%;
				background-color: #F5F7FB;
				color: #4e6ef2;
				line-height: 100rpx;
			}
		}
	}
	
	.swiper{
		image{
			width: 100%;
		}
	}
	.outer{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		.outer_view{
			width: 400rpx;
			height: 100%;
			background-color: #FFFFFF;
			image{
				width: 60rpx;
				margin:20rpx 10rpx;
			}
			
		}
	}
</style>
